<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
		<title>试卷预览</title>
		<link rel="shortcut icon" href="#" />
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<script type="text/javascript" src="../layui/layui.js"></script>
		<script type="text/javascript" src="../js/axios.min.js"></script>
		<script type="text/javascript" src="../js/QS.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<style>
			* {
				font-size: 20px;
				color: rgb(75, 75, 75); 
				font-family: '宋体'; 
				background-color: rgb(255, 255, 255);
			}

			#app {
				width: 1000px;
				height: 800px;
				margin: 10px auto;
				border: 3px solid whitesmoke;
				overflow: auto;
			}

			.important {
				color: red;
			}

			.question {
				border: 5px solid whitesmoke;
				margin-top: 10px;
			}
			h1{
				margin-top: 10px;
				margin-left: 888px;
				color: #0094ff;
			}
			.same{
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<h1>试卷预览</h1>
		<div id="app">
			<div class="question" v-for="(p,index) in paper.questionList">
				<div >
					<div class="same">{{index+1}}.</div>
					<div v-html="p.questionContent" class="same"></div>
				</div>
				A、<div v-html="p.answerA" class="same"></div><br />
				B、<div v-html="p.answerB" class="same"></div><br />
				C、<div v-html="p.answerC" class="same"></div><br />
				D、<div v-html="p.answerD" class="same"></div><br />
				<p class="important">解析：<span v-html="p.analyse"></span></p>
				<div>正确答案：<span class="important">{{p.correctAnswer}}</span></div>
			</div>
		</div>
		<button type="button" class="layui-btn layui-btn-normal" onclick="reback()" style="margin-left: 888px;">返回</button>
	</body>
	<script>
		layui.use(["form", "table", "layer", "laydate"], function(form, table, layer, laydate) {
			//获取跳转过来的试卷编号
			var params = getParams();
			var paperId = params.paperId;
			var app = new Vue({
				el: "#app",
				data: {
					paper: {}
				},
				mounted() {
					var that = this;
					//根据试卷编号获取所有的试卷信息
					axios.get(serverPath + "/papers/info/" + paperId, {
							headers: {
								"auth-token": getToken()
							}
						}).then(function(response) {
							console.log(response.data.data)
							//将请求的数据源赋值给vue对象中的数据
							that.paper = response.data.data;
						})
						.catch(function(error) {
							layer.alert(error.response.data.error)
						});

				}
			});
			//返回主页面
			window.reback = function() {
				location.href = "main.html";
			}

		});
	</script>

</html>
